<script setup lang="ts">
import type { Directive } from 'vue'
import { vTooltip } from '@/directives/tooltip'
// 注册全局指令，代码如下：
// const app = createApp(App)
// app.directive('focus', {
//   mounted(el) {
//     el.focus()
//   }
// })

// 局部指令
const vHighlight = {
  mounted(el: HTMLElement) {
    el.style.backgroundColor = '#ffeb3b'
    el.style.color = '#333'
  },
}

// 指令钩子
const vMyDirective: Directive<HTMLElement, string> = {
  // 在绑定元素的 attribute 前调用
  beforeMount(el, binding, vnode, prevVNode) {
    console.log('beforeMount')
    console.log('el', el)
    console.log('binding', binding)
    console.log('vnode', vnode)
    console.log('prevVNode', prevVNode)
  },

  // // 在绑定元素的父组件挂载后调用
  // mounted(el, binding, vnode, prevVnode) {
  //   console.log('mounted')
  // },

  // // 在包含组件的 VNode 更新前调用
  // beforeUpdate(el, binding, vnode, prevVnode) {
  //   console.log('beforeUpdate')
  // },

  // // 在包含组件的 VNode 及其子 VNode 全部更新后调用
  // updated(el, binding, vnode, prevVnode) {
  //   console.log('updated')
  // },

  // // 在绑定元素的父组件卸载前调用
  // beforeUnmount(el, binding, vnode, prevVnode) {
  //   console.log('beforeUnmount')
  // },

  // // 在绑定元素的父组件卸载后调用
  // unmounted(el, binding, vnode, prevVnode) {
  //   console.log('unmounted')
  // },
}
</script>

<template>
  <h2 class="directive">自定义指令</h2>
  <input type="text" v-focus placeholder="自动聚焦" />
  <button v-highlight v-my-directive="'123'">高亮按钮</button>

  <div>
    <br />
    <h3>指令高级用法（带参数和修饰符）</h3>
    <button v-tooltip="'这是顶部提示'">顶部提示</button>
    <button v-tooltip:bottom="'这是底部提示'">底部提示</button>
    <button v-tooltip:left.large="'这是左侧大提示'">左侧大提示</button>
    <button v-tooltip:right.success="'成功提示'">成功提示</button>
    <button v-tooltip:top.warning="'警告提示'">警告提示</button>
    <button v-tooltip:bottom.danger="'危险提示'">危险提示</button>
  </div>
</template>

<style scoped lang="scss"></style>
